<template>
  <el-card shadow="always" :padding="10">
    <div slot="header" style="border: none">
        <span><i class="el-icon-data-board"></i> </span>
      <span style="float: right">
        <el-button
          v-if="listVisible"
          type="primary"
          @click="init"
          size="mini"
          plain
          round
          :loading="btnLoading"
          style="background: none;border: none;color: black"
          ><i class="el-icon-refresh" style="font-size: 0.8rem"></i> </el-button
        >
      </span>
    </div>
    <transition-group name="el-zoom-in-bottom">
      <div
        class="no-announcement"
        v-if="!announcements.length"
        key="no-announcement"
      >
        <el-empty :description="$t('m.No_Announcements')"></el-empty>
      </div>
      <template >

        <ul class="announcements-container" key="list">
          <li v-for="announcement in announcements" :key="announcement.title">

              <el-collapse accordion style="border-top: none " @change="goAnnouncement(announcement)">
                  <el-collapse-item >
                      <template slot="title">
                          <span style="font-weight: bold " >{{getIndex(announcement)}}. {{announcement.title}}</span>
                      </template>
                      <div
                              v-katex
                              v-highlight
                              v-html="announcement.content"
                              key="content"
                              class="content-container markdown-body"
                      ></div>
                      <br>
                      <div style="float: right;margin-right: 20px;overflow: hidden;white-space: nowrap;width: 70px">{{announcement.gmtCreate | localtime}}</div>
                      <br>
                      <div style="float: right;margin-right: 38px;font:1rem Arial, sans-serif">{{announcement.username}}</div>
                  </el-collapse-item>
              </el-collapse>

          </li>
        </ul>
        <Pagination
          v-if="!isContest"
          key="page"
          :total="total"
          :page-size="limit"
          @on-change="getAnnouncementList"
        >
        </Pagination>
      </template>

    </transition-group>
  </el-card>
</template>

<script>
import api from '@/common/api';
import { addCodeBtn } from '@/common/codeblock';
import Pagination from '@/components/oj/common/Pagination';
export default {
  name: 'Announcement',
  components: {
    Pagination,
  },
  props: {
    limit: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      total: 0,
      btnLoading: false,
      announcements: [],
      announcement: '',
      listVisible: true,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.isContest) {
        this.getContestAnnouncementList();
      } else {
        this.getAnnouncementList();
      }
    },
    getAnnouncementList(page = 1) {
      this.btnLoading = true;
      api.getAnnouncementList(page, this.limit).then(
        (res) => {
          this.btnLoading = false;
          this.announcements = res.data.data.records;
          this.total = res.data.data.total;
        },
        () => {
          this.btnLoading = false;
        }
      );
    },
    getContestAnnouncementList(page = 1) {
      this.btnLoading = true;
      api
        .getContestAnnouncementList(
          page,
          this.limit,
          this.$route.params.contestID
        )
        .then(
          (res) => {
            this.btnLoading = false;
            this.announcements = res.data.data.records;
            this.total = res.data.data.total;
          },
          () => {
            this.btnLoading = false;
          }
        );
    },
    goAnnouncement(announcement) {
      this.announcement = announcement;
      this.announcement.content = this.$markDown.render(announcement.content);
      // this.listVisible = false;
      this.$nextTick((_) => {
        addCodeBtn();
      });
    },
    goBack() {
      this.listVisible = true;
      this.announcement = '';
    },
  },
  computed: {
    title() {
      if (this.listVisible) {
        return this.isContest
          ? this.$i18n.t('m.Contest_Announcement')
          : this.$i18n.t('m.Announcement');
      } else {
        return this.announcement.title;
      }
    },
    isContest() {
      return !!this.$route.params.contestID;
    },
    getIndex(){
        return function (announcement){
            return this.announcements.indexOf(announcement)+1;
        }
    },
  },
};
</script>

<style scoped>
.announcements-container {
  margin-top: -10px;
  margin-bottom: 10px;
}

/* .announcements-container li:last-child {
  border-bottom: none;
} */
.flex-container {
  text-align: center;
}
.flex-container .info {
  margin-top: 5px;
}

.flex-container .title .entry {
  color: #495060;
  font-style: oblique;
}
.flex-container .title a:hover {
  color: #2d8cf0;
  border-bottom: 1px solid #2d8cf0;
}
.creator {
  width: 200px;
  text-align: center;
}
.date {
  width: 200px;
  text-align: center;
  margin-right: 5px;
}

.content-container {
  padding: 0 20px 20px 20px;
}

.no-announcement {
  text-align: center;
  font-size: 16px;
}

.announcement-animate-enter-active {
  animation: fadeIn 1s;
}
ul {
  list-style-type: none;
  padding-inline-start: 0px;
}

</style>
